<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="resources/css/mybanner.css">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
body,html{
    width: 100%;
    height: 100%;
}
body{
    background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%);
}
    li {
        list-style-type:none;
    }
    .nav{
        height: 80px;
    }
    .nav-show a{
        color: #dee2e6;
        text-decoration: none;
        z-index: 500;
    }
    .nav-show a:hover{
        text-decoration: none;
    }
    .nav-show{
        display: none;
        left: 0;
        top:37px;
        width: 100px;
        background: #000;
        opacity: 0.7;
        position:absolute;
        z-index:100;
    }
    .nav-show li{
        padding: 5px 5px;
    }
    .nav-show li:hover{
        background: #a71d2a;
        opacity: 0.7;
    }
    .nav-item{
        position:relative;
        width: 100px;
        text-align: center;
    }
    .a-login{
        width: 100px;
        height: 40px;
    }
    .a-login:hover{
        background-color:#87CEFA;
    }
    .a-login a{
        text-decoration: none;
        color: white;
    }
    .nav-item:hover{
        background-color:#87CEFA;
    }
    .nav-item a{
        color: white;
        text-decoration: none;
    }
    #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: red;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
    }

    #myBtn:hover {
        background-color: #555;
    }

    h3{
        color:#007bff;
    }
    h4{
        color:#cce5ff;
    }
.footer-div{
    margin-top: 50px;
}
</style>
<body>
<div class="nav-container row justify-content-around no-gutters">
    <div class="col-3 div-nav">
        <ul class="nav justify-content-between">
            <li class="nav-item align-self-end">
                <a href="#" class="nav-link">回忆</a>
                <ul class="nav-show">
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">创建相册</a></li>
                </ul>
            </li>
            <li class="nav-item align-self-end">
                <a href="#" class="nav-link">故事</a>
                <ul class="nav-show">
                    <li><a href="#">我的故事</a></li>
                    <li><a href="#">制作故事</a></li>
                </ul>
            </li>
            <li class="nav-item align-self-end">
                <a href="#" class="nav-link">私人定制</a>
                <ul class="nav-show" >
                    <li><a href="#">证件照</a></li>
                    <li><a href="#">音乐相册</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-7 d-flex">
<!--        <p class="m-auto p-title">相册小助手</p>-->
        <img class="d-block m-auto" src="resources/img/相册小助手.png" height="70" alt="相册小助手">
    </div>
    <div class="col-2 row no-gutters d-flex justify-content-between">
        <div class="d-flex text-center align-self-end a-login">
            <a href="login_register.html" class="d-block m-auto">App下载</a>
        </div>
        <div class="d-flex text-center align-self-end a-login">
            <a href="login_register.html" class="d-block m-auto">登录</a>
        </div>
    </div>
</div>
<button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
<!--轮播图-->
<div class="box">
    <img src="resources/img/四季0.jpg" alt="11">
    <div class="btn-left d-flex"><span class="arrow"><</span></div>
    <div class="btn-right d-flex"><span class="arrow">></span></div>
    <ul class="points">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<br>
<!--<div class="container-fluid align-middle">-->
<!--    <h3 class="text-center"><strong>轻松掌控你的图库</strong></h3><br>-->
<!--    <h4 class="text-center">留下自己的回忆</h4><br>-->
<!--    <h6 class="text-center">-->
<!--        记录你生活出行的各个场景，平凡生活也可以聚合成精彩集锦。<br>-->
<!--    </h6><br>-->
<!--    <div class="media mid">-->
<!--        <img src="resources/img/bg-14.jpg" height="50" width="50"/>-->
<!--        <div class="media-body">-->
<!--            <h5 class="mt-0 mid1">音乐相册制作</h5>-->
<!--            <p class="mid1">聆听 感受 回忆记忆中的美好瞬间</p>-->
<!--            <div class="media mt-3">-->
<!--                <a class="mr-3" href="#">-->
<!--                    <img src="resources/img/bg-15.jpg" height="50" width="50"/>-->
<!--                </a>-->
<!--                <div class="media-body">-->
<!--                    <h5 class="mt-0 mid2">我的故事相册</h5>-->
<!--                    <p class="mid2">制作个人故事集，留下美好回忆</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--<div class="container-fluid align-middle">-->
<!--    <div class="row">-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-10.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-11.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-12.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-13.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div><br><br><br>-->
<!--<div class="container-fluid align-middle">-->
<!--    <div class="row">-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-13.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-12.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-11.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-3 col-sm-6">-->
<!--            <div class="product-grid">-->
<!--                &lt;!&ndash;图&ndash;&gt;-->
<!--                <div class="product-image">-->
<!--                    <a href="#">-->
<!--                        <img class="pic-1" src="resources/img/bg-10.jpg" alt="">-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<div class="footer-div d-flex">
    <div class="footer-content bg-success m-auto">
        关于我们
    </div>
    <div>
        <ul>
            <li>
                许成志
            </li>
            <li>
                王熠凡
            </li>
            <li>
                何崇鑫
            </li>
        </ul>
    </div>
</div>
<script>
    let nav_content = document.getElementsByClassName("nav-show");
    let nav_link = document.getElementsByClassName("nav-item");
    for(let i=0;i<=nav_content.length;i++){
        nav_link[i].onmouseover=function(){
            for(let j=0;j<nav_content.length;j++){
                if(i===j){
                    nav_content[j].style.display="block"
                }
                else {
                    nav_content[j].style.display="none"
                }
            }
        };
        nav_link[i].onmouseout=function(){
            for(let j=0;j<nav_content.length;j++){
                nav_content[j].style.display="none"
            }
        };
    }
</script>
<script>
    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    //onscroll监听窗口滑动
    window.onscroll = function() {scrollFunction()};
    function scrollFunction() {console.log(121);
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    // 点击按钮，返回顶部
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<script>
    var btn_left=$('.btn-left');
    var btn_right=$('.btn-right');
    var li=$(".points li");
    var index=0;
    btn_left.click(function (){
        if(index===0){
            index=3;
        }
        else {
            index--;
        }
        $(".box img").attr('src',"resources/img/四季"+index+".jpg")
        pointsColor()
    });
    btn_right.click(function (){
        if(index===3){
            index=0;
        }
        else {
            index++;
        }
        $(".box img").attr('src',"resources/img/四季"+index+".jpg")
        pointsColor()
    });
    function pointsColor(){
        for(var i=0;i<li.length;i++){
            li.eq(i).css("background","#95999c")
        }
        li.eq(index).css({"background":"#DC143C","opacity":"1"});
    }
    for(var i=0;i<li.length;i++){
        (function(i){
            li.eq(i).click(function(){
                console.log(i)
                $(".box img").attr('src',"resources/img/四季"+i+".jpg");
                for(let i=0;i<li.length;i++){
                    li.eq(i).css("background","#95999c")
                }
                li.eq(i).css({"background":"#DC143C","opacity":"1"});
            });
        })(i);
    }
    setInterval(function(){
        console.log("index===>"+index)
        $(".box img").attr('src',"resources/img/四季"+index+".jpg");
        for(let i=0;i<li.length;i++){
            li.eq(i).css({"background":"#95999c"})
        }
        li.eq(index).css({"background":"#DC143C","opacity":"1"});
        index>2?index=0:index++;
    },2000);
</script>
</body>
</html>